<template>
  <!-- 封装的svg -->
  <div style="text-align: center;">
    <svg :viewBoxs="viewbox" :style="svgstyle">
      <defs>
        <linearGradient
          id="SVGID_1_"
          gradientUnits="userSpaceOnUse"
          x1="0"
          y1="0"
          x2="0"
          y2="90"
        >
          <stop offset="0.2" style="stop-color: #ffffff" />
          <stop offset="0.9" style="stop-color: #6bdbfa" />
          <stop offset="1" style="stop-color: #6bdbfa" />
        </linearGradient>
      </defs>
      <text
        style="fill: url(#SVGID_1_); font-weight: bolder; font-size: calc(100vw * 40 / 1920);"
        text-anchor="middle"
        x="50%"
        y="46%"
      >
        {{ textname }}
      </text>
    </svg>
  </div>
</template>

<script>
export default {
  name: "cnSvg",
  data() {
    return {};
  },
  methods: {},
  //参数传递需要在props里面声明
  props: {
    viewbox: {
      type: String,
    },
    svgstyle: {
      type: String,
    },
    textname: {
      type: String,
    },
  },
};
</script>

<style></style>
